<template>
  <view class="delivery-details-page">
    <view class="delivery-info-wrap">
      <view class="delivery-info">
        <view class="left">
          <view class="avatar-wrap">
            <image :src='ftp + riderInfo.avatar'></image>
          </view>
          <view class="other-info">
            <view class="name">{{riderInfo.username}}</view>
            <view class="tag-wrap">
              <uni-tag
                text="已认证"
                type="primary"
                size="small"
              ></uni-tag>
            </view>
          </view>
        </view>
        <view class="right-btn">
          <van-button
            type="info"
            size="small"
            custom-class="send-btn"
            @click="handleToSend"
          >我要寄件</van-button>
        </view>
      </view>

      <view class="delivery-other-info">
        <view class="complete-order">
          <text>完成{{riderInfo.order_num}}单</text>

          <view class="right-option">

            <uni-icons
              type="phone-filled"
              size="18"
              color="#BFBFC1"
              class="phone"
              @click="handleCall(riderInfo.mobile)"
            ></uni-icons>

            <uni-icons
              type="chatbubble-filled"
              size="18"
              color="#BFBFC1"
              @click="handleToChat"
            ></uni-icons>

          </view>
        </view>

        <view class="rate">
          <view class="text">评分</view>
          <uni-rate :value="riderInfo.comment_score" readonly/>
        </view>
      </view>

    </view>

    <view class="user-evaluate-wrap">
      用户评价（{{totalComment}}）
    </view>

    <view class="user-evaluate-list">
      <view
        class="user-evaluate-content"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="left-user-info">
          <image :src='ftp + item.avatar' class='avatar'></image>
          <view class="user-name">{{item.nickname}}</view>
        </view>

        <view class="evaluate-content">
          <view class="evaluate-text">{{item.content}}</view>

          <view class="bottom-info">
            <view class="time">{{ item.comment_time }}</view>
            <view class="rate-wrap">
              <uni-rate :value="item.score" readonly/>
            </view>
          </view>
        </view>
      </view>

    </view>

    <van-toast id="van-toast"/>

  </view>
</template>

<script>
  const app = getApp()
  import Toast from '@/wxcomponents/vant/toast/toast';

  export default {
  data() {
    return {
      id: '',
      rateValue: 4,
      pageIndex: 1,
      pageSize: 100000,
      list: [],
      totalComment: 0,
      loading: false,
      hasMoreData: false,
      isNullData: false,
      riderInfo: {},
      ftp: app.globalData.ftp
    }
  },
  methods: {
    handleCall(mobile) {
      uni.makePhoneCall({
        phoneNumber: mobile
      });
    },
    handleToChat() {

    },
    handleToSend() {
      const {
        riderInfo
      } = this

      app.globalData.selectExpressManInfo = {
        ...riderInfo,
        entity_name: riderInfo.username,
        express_id: riderInfo.id
      }

      uni.switchTab({
        url: '/pages/index/send'
      })
    },

    handleGetList() {
      const {
        pageIndex,
        pageSize,
        id,
      } = this

      app.request({
        page: pageIndex,
        limit: pageSize,
        express_id: id,
      } , '/api/logistics/comment/com_list').then((res) => {
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          let getList = data.data || []
          let list = this.list
          const {
            total
          } = data

          const newList = list.concat(getList)
          let hasMoreData = true
          let isNullData = false

          if (getList.length < pageSize || !getList.length) {
            hasMoreData = false
          }

          if (pageIndex === 1 && !getList.length) {
            isNullData = true
          }

          this.hasMoreData = hasMoreData
          this.isNullData = isNullData
          this.list = newList
          this.totalComment = total
        } else {
          Toast(msg)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleGetDetail() {
      const {
        id
      } = this

      Toast.loading({
        message: '加载中',
        mask: true,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true
      })
      app.request({
        express_id: id
      }, '/api/logistics/express/express_use_detail').then((res) => {
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          this.riderInfo = data
        } else {
          Toast(msg)
        }
      }).finally(() => {
        Toast.clear()
      })
    }

  },
  onLoad(res) {
    const {
      id
    } = res

    this.id = id
    this.handleGetList()
    this.handleGetDetail()
  }
}
</script>

<style lang="scss">
.delivery-details-page {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-top: 1rpx;
  .delivery-info-wrap {
    width: 100%;
    height: 190rpx;
    background-color: #fff;
    margin: 20rpx 0;

    .delivery-info {
      width: 100%;
      height: 126rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      box-sizing: border-box;
      padding-top: 8rpx;
      padding-bottom: 18rpx;
      border-bottom: 1rpx solid #f0f0f8;

      .left {
        display: flex;
        align-items: center;

        .avatar-wrap {
          width: 68rpx;
          height: 68rpx;
          margin-right: 16rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .other-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            font-size: 28rpx;
          }

          .tag-wrap {
            .margin-right {
              margin-right: 16rpx;
            }

          }
        }
      }

      .right-btn {
        .send-btn {

        }
      }
    }

    .delivery-other-info {
      display: flex;
      height: 62rpx;
      .complete-order {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 62rpx;
        flex: 1;
        border-right: 1rpx solid #f0f0f8;
        padding-left: 26rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #999999;
        .right-option {
          display: flex;
          align-items: center;
          .phone {
            margin-right: 32rpx;
          }
          .chat {
            margin-right: 32rpx;
          }
        }
      }

      .rate {
        display: flex;
        height: 62rpx;
        flex: 1;
        align-items: center;
        padding-left: 26rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        color: #999999;
        .text {
          margin-right: 16rpx;
        }
      }
    }
  }

  .user-evaluate-wrap {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding: 0 22rpx;
    box-sizing: border-box;
    color: #666666;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f8;
  }

  .user-evaluate-list {
    background-color: #ffffff;
    .user-evaluate-content {
      width: 100%;
      padding: 18rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1rpx solid #f0f0f8;
      .left-user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 2rpx;
          margin-bottom: 8rpx;
        }
        .user-name {
          font-size: 24rpx;
          color: #666666;
        }
      }

      .evaluate-content {
        width: 626rpx;
        .evaluate-text {
          font-size: 24rpx;
          margin-bottom: 10rpx;
          color: #666666;
        }

        .bottom-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time {
            font-size: 22rpx;
            color: #999999;
          }
        }

      }
    }
  }
}
</style>
